<template>
  <div>
    <KoiLogo></KoiLogo>
    <div class="w-100% flex flex-justify-center">
      <div class="w-565px text-center flex flex-col flex-items-center">
        <div
          class="capitalize text-#333 dark:text-#D8D8D8 text-230px line-height-230px m-b-20px"
          style="font-family: 'Dancing Script'"
        >
          404
        </div>
        <div class="text-#727272 dark:text-#D8D8D8 m-b-30px text-16px">
          We’re sorry but we can’t seem to find the page you requested. This might be because you have typed the web address
          incorrectly
        </div>
        <div
          class="w-168px h-45px p-x-20px text-12px tracking-1px font-800 line-height-45px text-#fff bg-#000 border-none m-b-20px hover:text-[--el-color-primary]"
          @click="handleHomePage"
        >
          Go To Home Page
        </div>
      </div>
    </div>
    <KoiFooter></KoiFooter>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { HOME_URL } from "@/config/index.ts";
import KoiLogo from "@/views/logo/index.vue";
import KoiFooter from "@/layouts/components/Footer/index.vue";

const router = useRouter();

/** 跳转首页 */
const handleHomePage = () => {
  router.push({ path: HOME_URL });
};
</script>

<style scoped></style>
